<template>
    <div id="myMain">
        <div class="displayFlexR" style="flex:1;">
            <div class="approval_details_left myMain-padding">
                <p class="btitle">{{ approvalInfo.title }}</p>
                <div style="    margin: 20px 0;height: 30px;line-height: 30px;">
                    <span>发起人：{{ approvalInfo.nickname }}</span>
                    <span>新闻板块：{{ approvalInfo.name }}</span>
                    <span>发布时间：{{ approvalInfo.creatTime }}</span>
                </div>
                <p class="myTitle">简介</p>
                <p class="synopsis">{{approvalInfo.synopsis}}</p>
                <p class="myTitle">正文</p>
                <p class="text" v-html="approvalInfo.text"></p>
            </div>
            <div class="approval_details_right myMain-padding">
                <p class="baseBG hh">当前处理人： {{username}}</p>
                <el-radio-group v-model="checkList">
                    <el-radio label="同意"></el-radio>
                    <el-radio label="不同意"></el-radio>
                </el-radio-group>
                <p>处理意见：</p>
                <el-input type="textarea" v-model="textarea" rows="3" placeholder="请输入处理意见"></el-input>
                <p>历史处理意见：</p>
                <el-timeline>
                    <el-timeline-item timestamp="2018/4/12" placement="top">
                    <el-card>
                        <p>发起人： {{approvalInfo.nickname}}</p>
                    </el-card>
                    </el-timeline-item>
                </el-timeline>
                <div class="btn">
                    <el-button class="baseBG" @click="submit">确认</el-button>
                    <el-button @click="cancel">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import '../../../styles/all';
#myMain{
    .approval_details_left{
        flex: 4;
        margin-right: 20px;
        .btitle{
            text-align: center;
            font-size: 22px !important;
            color: chocolate;
        }
        span{
            width: 33%;
            text-align: center;
            float: left;
            color: chocolate;
        }
        .synopsis, .text{
            text-indent: 2em;
            line-height: 25px;
        }
        .myTitle{
                font-size: 16px !important;
                font-weight: bold;
                line-height: 40px;
                color: chocolate;
        }
        
    }
    .approval_details_right{
        flex: 1;
        position: relative;
        p{
            text-align: left;
            line-height: 35px;
        }
        .hh{
            padding: 2% 4%;
            border-radius: 5px;
        }
        .el-radio-group{
            margin: 2vh 0;text-align: left;
        }
        ::v-deep.el-timeline-item__timestamp.is-top{
            text-align: left;
        }
        // 线的颜色
        ::v-deep.el-timeline-item__tail {
            border-left: 2px solid #28567f;
        }
        // 圆点颜色
        ::v-deep.el-timeline-item__node {
            background-color: #28567f;
        }
        .btn{
            position: absolute;
            right: 4%;
            bottom: 2%;
        }
    }
}
</style>
<script>
import { getApprovalInfoById , putApprovalInfoById} from '@/api/newsAndNotice'
export default {
    props: {
    },
    components:{},
    data(){
        return{
            // 新闻内容
            approvalInfo: {},
            textarea: '',
            checkList: [],
            rowId: this.$route.query.data.id,
            username:null,
            userID:null
        }
    },
    methods:{
        getUserInfo(){
            this.$store.dispatch('user/getInfo').then(res => {
                console.log('user info', res)
                this.username = res.user.nickname
                this.userID = res.user.id
            })
        },
        init(){
            getApprovalInfoById(this.rowId).then(res => {
                console.log('审批详情 res', res)
                this.approvalInfo = res
            })
        },
        submit(){
            if(this.checkList != ''){
                let result = {}
                if(this.checkList == '不同意'){
                    result['sortStatus'] = 2
                }else{
                    result['sortStatus'] = 1
                }
                result['id'] = this.rowId
                result['cid'] = this.userID
                result['opinion'] = this.textarea
                this.$confirm('是否审批该条信息？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    putApprovalInfoById(result).then(res => {
                        console.log(res)
                        this.$router.go(-1)
                    })
                })
                
            }else{
                this.$message.error('请选择同意或者不同意！');
            }
        },
        cancel(){
            this.$router.go(-1)
        }
    },
    created(){},
    mounted(){
        this.getUserInfo()
        this.init()
    },
}
</script>